<template>
    <PageHeader title="设置交易密码" :showBack="true" />
    <view
        class="page-container bg-gradient-to-br from-[#1a237e] via-[#283593] to-[#3949ab] min-h-screen flex justify-center items-center p-[20rpx] w-full mt-[-40rpx]"
        style="box-sizing: border-box;">
        <!-- 主容器 -->
        <view
            class="container w-full max-w-[750rpx] bg-white rounded-[24rpx] shadow-[0_20rpx_40rpx_rgba(0,0,0,0.3)] overflow-hidden relative">
            <!-- 头部区域 -->
            <view
                class="header bg-gradient-to-r from-[#2196f3] to-[#1976d2] text-white p-[32rpx_24rpx] text-center relative">
                <view
                    class="security-icon w-[80rpx] h-[80rpx] bg-[rgba(255,255,255,0.15)] rounded-full flex items-center justify-center mx-auto mb-[20rpx]">
                    <IconFont font-class-name="iconfont" class-prefix="icon" name="lock" size="40" color="#ffffff" />
                </view>
                <text class="text-[28rpx] font-semibold block mb-[12rpx] tracking-[1rpx]">设置交易密码</text>
                <text class="text-[16rpx] opacity-90 block max-w-[300rpx] mx-auto leading-[1.5]">请设置您的交易密码，确保交易安全</text>
            </view>

            <!-- 密码输入区域 -->
            <view class="password-container p-[40rpx_30rpx_30rpx]">
                <text
                    class="input-title text-center text-[#333] text-[18rpx] block mb-[30rpx] font-medium">请输入交易密码</text>

                <!-- 密码输入框 -->
                <view class="password-inputs flex justify-center mb-[50rpx]">
                    <view v-for="(box, index) in 6" :key="index"
                        class="input-box w-[60rpx] h-[70rpx] mx-[8rpx] rounded-[12rpx] flex items-center justify-center text-[28rpx] font-medium transition-all duration-300 border-[2rpx] border-[#e0e0e0]"
                        :class="[
                            index < password.length ? 'filled' : '',
                            index === password.length ? 'active border-[#2196f3] shadow-[0_0_0_2rpx_rgba(33,150,243,0.3)]' : '',
                            isPulsing && index === password.length - 1 ? 'animate-pulse' : ''
                        ]">
                        <view v-if="index < password.length" class="w-[22rpx] h-[22rpx] bg-[#2196f3] rounded-full">
                        </view>
                    </view>
                </view>

                <!-- 密码强度指示器 -->
                <view class="password-strength flex justify-center mb-[30rpx]">
                    <view v-for="(bar, index) in 5" :key="index"
                        class="strength-bar w-[40rpx] h-[4rpx] mx-[4rpx] rounded-[2rpx] transition-all duration-300"
                        :class="index < password.length ? 'bg-[#4caf50]' : 'bg-[#e0e0e0]'"></view>
                </view>
            </view>

            <!-- 数字键盘 -->
            <view class="keyboard grid grid-cols-3 gap-[15rpx] p-[0_20rpx_30rpx]">
                <view v-for="(key, index) in keyboardLayout" :key="index"
                    class="key h-[70rpx] bg-[#f5f8fa] rounded-[16rpx] flex items-center justify-center text-[28rpx] font-medium text-[#333] cursor-pointer user-select-none transition-all duration-200 shadow-[0_4rpx_8rpx_rgba(0,0,0,0.05)] relative overflow-hidden"
                    :class="[
                        key && key.type === 'delete' ? 'text-[#f44336]' : '',
                        key && key.type === 'empty' ? 'opacity-0 cursor-default' : '',
                        'active:bg-[#e3f2fd] active:translate-y-[2rpx] active:shadow-[0_2rpx_4rpx_rgba(0,0,0,0.05)]'
                    ]" @click="key && key.type !== 'empty' && handleKeyPress(key)"
                    :v-if="key.type !== 'empty' || index !== 9">
                    <template v-if="key.type === 'number'">
                        {{ key.value }}
                    </template>
                    <template v-if="key.type === 'delete'">
                        <IconFont font-class-name="iconfont" class-prefix="icon" name="backspace" size="24" />
                    </template>
                    <view
                        class="absolute inset-0 bg-[rgba(33,150,243,0.1)] opacity-0 transition-opacity duration-200 active:opacity-100">
                    </view>
                </view>
                <!-- 空键位 -->
                <view v-if="keyboardLayout[9].type === 'empty'" class="h-[70rpx]"></view>
            </view>

            <!-- 提示信息 -->
            <view class="hint text-center text-[#666] text-[14rpx] mt-[20rpx] p-[0_20rpx] leading-[1.6] mb-[30rpx]">
                <text class="inline-flex items-center">
                    <IconFont font-class-name="iconfont" class-prefix="icon" name="info-circle" size="14"
                        class="mr-[5rpx] text-[#2196f3]" />
                    请设置6位数字密码，不要使用连续或重复的数字
                </text>
            </view>
        </view>
    </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import Taro from '@tarojs/taro'
import { IconFont } from '@nutui/icons-vue-taro'
import { post } from '@/utils/request'
import { useUserStore } from '@/store/user'

const userStore = useUserStore();

// 密码状态
const password = ref('')
const newPassword = ref('')
const confirmPassword = ref('')
const isPulsing = ref(false)

// 新旧密码标题切换
const isBand = ref(false)

// 获取路由上的参数
// const urlType = Taro.getCurrentInstance().router?.params?.type
// console.log(urlType)


// 键盘布局
const keyboardLayout = ref([
    { type: 'number', value: '1' },
    { type: 'number', value: '2' },
    { type: 'number', value: '3' },
    { type: 'number', value: '4' },
    { type: 'number', value: '5' },
    { type: 'number', value: '6' },
    { type: 'number', value: '7' },
    { type: 'number', value: '8' },
    { type: 'number', value: '9' },
    { type: 'empty' },
    { type: 'number', value: '0' },
    { type: 'delete' }
])

// 添加输入动画
const addPulseAnimation = () => {
    isPulsing.value = true;
    setTimeout(() => {
        isPulsing.value = false;
    }, 300);
};
// 使用Taro.showToast显示提示
const showTaroToast = (title: string) => {
    Taro.showToast({
        title,
        icon: 'none',
        duration: 1500
    });
};

// 密码不匹配提示
const showPasswordMismatch = (title: string) => {
    Taro.showToast({
        title,
        icon: 'none',
        duration: 1500
    });
    password.value = ''
    isBand.value = false
};

// 处理键盘输入
const handleKeyPress = async (key: any) => {
    if (key.type === 'number' && password.value.length < 6) {
        // 添加动画效果
        addPulseAnimation();

        // 输入数字处理
        if (key.type === 'number') {
            // 根据当前阶段处理密码输入
            if (!isBand.value) {
                // 密码输入阶段
                if (password.value.length < 6) {
                    password.value += key.value;
                    addPulseAnimation();

                    // 密码输入完成
                    if (password.value.length === 6) {
                        newPassword.value = password.value;
                        password.value = '';
                        showTaroToast('请再次输入确认密码');
                        isBand.value = true;
                    }
                }
            } else if (isBand.value) {
                // 确认密码输入阶段
                if (password.value.length < 6) {
                    password.value += key.value;
                    addPulseAnimation();

                    // 确认密码输入完成
                    if (password.value.length === 6) {
                        confirmPassword.value = password.value;
                        console.log("新密码----", newPassword.value, "确认密码----", confirmPassword.value);
                        // 验证密码一致性
                        if (newPassword.value === confirmPassword.value) {
                            // API调用修改密码
                            const res = await post( '/user/initPayPassword', {
                                confirmPassword: confirmPassword.value
                            })
                            console.log(res)
                            if(res.code === 0){
                                showTaroToast('设置密码成功')
                                userStore.userInfo.pay_password = '1'
                                Taro.navigateBack()
                            }
                        } else {
                            // 密码不一致，提示用户
                            showPasswordMismatch('两次输入的密码不一致，请重新输入');
                        }
                    }
                }
            }
        }
    } else if (key.type === 'delete' && password.value.length > 0) {
        password.value = password.value.slice(0, -1)
    }
};
</script>